import { useState } from "react";
import { ReactFlow, MiniMap, Controls, Background, Panel } from "@xyflow/react";
import "@xyflow/react/dist/style.css";

import { defaultNodes } from "./nodes";
import { defaultEdges } from "./edges";

const nodeColor = (node) => {
  switch (node.type) {
    case "input":
      return "#6ede87";
    case "output":
      return "#6865A5";
    default:
      return "#ff0072";
  }
};

function Flow() {
  const [variant, setVariant] = useState("cross");

  return (
    <ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} fitView>
      <MiniMap nodeColor={nodeColor} nodeStrokeWidth={1} zoomable pannable />
      <Controls />
      <Background color="#ccc" variant={variant} />
      <Panel position="top-left">
        <div>variant:</div>
        <button onClick={() => setVariant("dots")}>dots</button>
        <button onClick={() => setVariant("lines")}>lines</button>
        <button onClick={() => setVariant("cross")}>cross</button>
      </Panel>
      {/* <Panel position="top-left">top-left</Panel> */}
      <Panel position="top-center">top-center</Panel>
      <Panel position="top-right">top-right</Panel>
      <Panel position="bottom-left">bottom-left</Panel>
      <Panel position="bottom-center">bottom-center</Panel>
      <Panel position="bottom-right">bottom-right</Panel>
    </ReactFlow>
  );
}

export default Flow;
